<template>
	<view class="chart-box">
		<view class="title">
			<view class="tit-item">
				第一次
			</view>
			<view class="tit-item tit-item1">
				第二次
			</view>
		</view>
		<view style="height: 400rpx">
			<l-echart ref="chart"></l-echart>
		</view>
		<view class="fgx">

		</view>
		<view class="bottom">
			<view class="bottom-item">
				<view class="left">
					<view class="dot">

					</view>
					满意
				</view>
				<view class="text">
					第一次：65%
				</view>
				<view class="text">
					第二次：75%
				</view>
			</view>
			<view class="bottom-item">
				<view class="left">
					<view class="dot dot2">

					</view>
					基本满意
				</view>
				<view class="text">
					第一次：20%
				</view>
				<view class="text">
					第二次：10%
				</view>
			</view>
			<view class="bottom-item">
				<view class="left">
					<view class="dot dot3">

					</view>
					不满意
				</view>
				<view class="text">
					第一次：15%
				</view>
				<view class="text">
					第二次：15%
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				data: [{
						value: 75,
						name: '第一次'
					},
					{
						value: 15,
						name: '第二次'
					},
					{
						value: 10,
						name: '第三次'
					},
				]
			};
		},
		mounted() {
			let _this = this;
			this.$refs.chart.init(echarts, chart => {
				let option = {
					legend: {
						show: false
					},
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							return `${params.name}<br />${params.percent}%<br />${params.value}人`;
						}
					},

					grid: {
						bottom: '20%'
					},
					series: [{
						name: 'pre1',
						type: 'pie',
						radius: ['30%', '50%'],
						center: ['20%', '50%'], // 中心对齐
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'inside', // 标签显示在中心
							formatter: '{d}%', // 显示百分比   
							backgroundColor: '#fff', // 设置背景色为白色
							color: '#333',
							borderRadius: '50%', // 圆形背景
							padding: [5, 5], // 添加内边距
							lineHeight: 20, // 行高，确保文字垂直居中
						},
						labelLine: {
							show: false // 隐藏连接线
						},
						data: _this.data
					}, {
						name: 'pre2',
						type: 'pie',
						radius: ['40%', '60%'],
						center: ['70%', '50%'], // 中心对齐
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'inside', // 标签显示在中心
							formatter: '{d}%', // 显示百分比   
							backgroundColor: '#fff', // 设置背景色为白色
							color: '#333',
							borderRadius: '50%', // 圆形背景
							padding: [5, 5], // 添加内边距
							lineHeight: 20, // 行高，确保文字垂直居中
						},
						labelLine: {
							show: false // 隐藏连接线
						},
						data: _this.data
					}],
					color: ['#3850FB', '#F79661', '#FF8180']
				};
				chart.setOption(option);
			});
		}
	};
</script>
<style lang="scss" scoped>
	.chart-box {
		position: relative;

		.title {
			width: 100%;
			display: flex;
			align-items: center; 

			.tit-item {
				width: 40%;
				text-align: center;
			}
			.tit-item1 {
				width: 60%;
				text-align: center;
			}
		}

		.fgx {
			position: absolute;
			top: 21%;
			left: 43%;
			height: 250rpx;
			width: 2rpx;
			background: #EFEFEF;
		}

		.bottom {
			.bottom-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 30%;

					.dot {
						width: 26rpx;
						height: 26rpx;
						background: #3850FB;
						border-radius: 50%;
						margin-right: 22rpx;
					}

					.dot2 {
						background: #F79661;

					}

					.dot3 {
						background: #FF8180;

					}
				}

				.text {
					font-family: Inter, Inter;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-left: 36rpx;
				}

			}
		}
	}
</style>